import 'package:flutter/material.dart';
/* 
Stack、Align、Positioned
Stack表示堆的意思，我们可以用Stack或者Stack结合Align或者Stack结合 Positiond来实现页面的定位布局
属性：
- alignment       配置所有子元素的显示位置
- children 

*/

void main() {
  runApp(
      // 入口文件可以是自定义组件 也可以是flutter组件
      MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('GridView'),
      ),
      body: MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      height: 400,
      width: 300,
      color: Colors.pink,
      child: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment(0, -0.2), // 两个参数的取值是 -1 到 1  意思是到边缘的倍数
            child: Icon(Icons.home, size: 40, color: Colors.white),
          ),
          Align(
            alignment: Alignment.center,
            child: Icon(Icons.search, size: 30, color: Colors.white),
          ),
          // 除了Align组件 可以定位  Positioned 组件也可以定位
          Positioned(
            left: 0,
            top: 0,
              child: Icon(Icons.settings_applications,
                  size: 30, color: Colors.white))
        ],
      ),
    ));
  }
}
